<!--
 * @Description: 第十六章（动态组件）
 * @Author: IA ia@kepro.space
 * @Date: 2025-02-16 00:42:55
-->
<template>
  <div>
    <p>第十六章（动态组件）</p>
    <hr />
    <div>
      <p></p>
      <div style="display: flex">
        <div
          class="tabs"
          :class="[active == index ? 'active' : '']"
          v-for="(item, index) in data"
          @click="switchCom(item, index)"
        >
          <span>{{ item.name }}</span>
        </div>
      </div>
      <component :is="comId"></component>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, markRaw, shallowRef } from 'vue'
import AVue from '@/components/16th/A.vue'
import BVue from '@/components/16th/B.vue'
import CVue from '@/components/16th/C.vue'

// const comId = ref(AVue)
const comId = shallowRef(AVue)

const active = ref(0)

const switchCom = (item: any, index: number) => {
  comId.value = item.com
  active.value = index
}

const data = reactive([
  {
    name: 'A组件',
    com: markRaw(AVue),
  },
  {
    name: 'B组件',
    com: markRaw(BVue),
  },
  {
    name: 'C组件',
    com: markRaw(CVue),
  },
])
</script>
<style scoped lang="less">
hr {
  margin: 10px 0;
}

.active {
  background-color: skyblue;
}

.tabs {
  border: 1px solid #ccc;
  padding: 5px 10px;
  margin: 5px;
  cursor: pointer;
}
</style>
